<template>
  <view class="w-[100%] h-[100vh] relative overflow-hidden flex">
    <image src="@/static/images/game_logo/bg.png" class="w-[100%] h-[100%] z-[-1] absolute top-0"></image>
    <view class="w-[100%] px-[55rpx] mt-[340rpx] flex-col justify-center items-center">
      <view class="text-[40rpx] mb-[95rpx] text-[#000] font-[600] tracking-[4rpx] text-center">欢迎回来</view>
      <view class="w-[100%] h-[566rpx] pt-[30rpx] flex flex-col px-[51rpx] relative">
        <image src="@/static/images/game_logo/login.png" class="w-[100%] h-[100%] absolute left-0 top-0 "
          style="scale:1.16"></image>
        <view class="w-[100%] flex-1 flex justify-center items-center rounded-[50rpx] overflow-hidden">
          <button 
            class="w-[100%] h-[108rpx] login-btn" 
            open-type="getPhoneNumber" 
            @getphonenumber="onGetPhoneNumber"
          >
            <image src="@/static/images/game_logo/login_btn.png" class="w-[100%] h-[108rpx]"></image>
          </button>
        </view>
      </view>
    </view>
  </view>
  <!-- <mplogin-popup v-model:show="show" :logo="'https://falvren.oss-cn-beijing.aliyuncs.com/2025040314415692669.jpg'" title="东元电竞俱乐部" :token="token"   @showCole="showCole"
    @update="handleUpdateUser" /> -->
</template>
<script setup>
import { ref } from 'vue'
import { wxLogin, setNewUser } from '@/api/oauth';
import { getWxCode } from '@/utils/geek'; 
import { setToken } from '@/utils/auth';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const token = ref(null);
// 头像昵称弹窗组件
// const show = ref(false);
// const handleUpdateUser = async (value) => {
//   // 处理头像昵称逻辑
//   show.value = false;
//   const data = value;
//   data.userId = userId.value;
//   console.log(value);
//   await setNewUser(data, token.value).then(res => {
//     if (res.code == 200) {
//       setUserInfo(token.value,userId.value);
//     } else {
//       loginLoading.value = false;
//       uni.$u.toast(res?.msg);
//     }
//   }).catch(err => {
//     loginLoading.value = false;
//     console.log(err)
//   })
// }
// const showCole = async (e) => {
//   // 弹窗关闭,登录失败
//   show.value = false;
//   loginLoading.value = false;
// }
// 登录逻辑
const loginLoading = ref(false);
const userId = ref(null);
const vxLogin = async (code = '') => {
  try {
    // 防止重复点击
    if (loginLoading.value) return;
    loginLoading.value = true;
    uni.showLoading({ title: '登录中...',mask: true});
    // 获取微信授权码
    const wxCode = await getWxCode().catch(() => {
      throw new Error('获取授权码失败');
    });
    // 构建登录参数
    const loginParams = {
      code: wxCode,
      phoneCode: code
    };
    // 执行登录请求并解构数据
    const { data = {}, msg } = await wxLogin('miniapp', loginParams).catch((error) => {
      throw new Error(error?.msg || '登录请求失败');
    });
    const { token, user } = data;
    // 验证登录结果
    if (!token) {
      throw new Error(msg || '登录失败:未获取到token');
    }
    // 处理登录成功逻辑
    if (token) {
      await setUserInfo(token, user.userId);
      uni.showToast({ title: '登录成功', icon: 'success' });
    } else {
      uni.$u.toast(msg);
    }
  } catch (error) {
    console.error('登录错误:', error);
    uni.$u.toast(error?.msg || '登录失败');
  } finally {
    loginLoading.value = false;
    uni.hideLoading();
  }
};
const onGetPhoneNumber = (e) => {
  console.log(e);
  if (loginLoading.value) return false;
  if (!e.detail.code) {
    return uni.$u.toast('手机号获取失败');
  } else {
    vxLogin(e.detail.code);
  }
};
// 保存用户信息
const setUserInfo = (token, userId) => {
  setToken(token);
  userStore.getInfo(userId);
  setTimeout(() => {
    loginLoading.value = false;
    try {
      uni.navigateBack({
        fail: () => {
          uni.reLaunch({
            url: '/pages/index'
          });
        }
      });
    } catch (error) {
      uni.reLaunch({
        url: '/pages/index'
      });
    }
  }, 1500);
}
</script>
<style lang="scss">
Page,
body {
  background-color: rgb(244, 244, 244) !important;
}

.login-btn {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  
  &::after {
    border: none;
  }
}
</style>